<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="编辑工程信息"
        width="1060px"
    >
        <div :loading="loading" class="edit_page_div">
            <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px" inline>
                <el-form-item label="工程编号" prop="programCode">
                    <el-input v-model="form.programCode" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="工程名称" prop="programName">
                    <el-input v-model="form.programName" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="工程加密" prop="programSecret">
                    <el-input v-model="form.programSecret" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="工程地址" prop="redirectUri">
                    <el-input v-model="form.redirectUri" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="显示顺序" prop="orderNum">
                    <el-input v-model="form.orderNum" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="enableFlag">
                    <radios-option v-model="form.enableFlag"></radios-option>
                </el-form-item>
                <el-form-item label="显示图片" prop="programImage">
                    <div class="el_image_upload" style="width: 400px;">
                        <el-button type="text" @click="uploadImg">上传图片</el-button>
                        <img :src="$store.state.fileURL + form.programImage" height="30px" width="30px" alt=""/>
                    </div>
                </el-form-item>
                <el-form-item label="过期时长" prop="accessToken">
                    <el-input v-model="form.accessToken" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="form.remarks" rows="2" style="width: 900px;" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
            <upload-file :visible.sync="showUpload" :limit="1" :suffixes="suffixes" @change="setFileList"></upload-file>
        </div>
    </el-dialog>
</template>

<script>
import RadiosOption from "@/components/radio/radiosOption.vue";
import CheckboxOption from "@/components/checkbox/checkboxOption.vue";
import UploadFile from "@/components/upload/uploadFile.vue";

export default {
    name: "programEdit",
    components: {UploadFile, CheckboxOption, RadiosOption},
    props: {
        visible: Boolean,
        id: Number,
    },
    data() {
        return {
            viewUrl: CONFIG.viewUrl,
            loading: false,
            showUpload: false,
            suffixes: '',
            scopes: [
                {label: "读", value:"read"},
                {label: "写", value:"write"},
            ],
            grantTypes: [
                {label: "密码式", value:"password"},
                {label: "授权码", value:"authorization_code"},
                {label: "客户端凭证", value:"client_credentials"},
            ],
            form: {
                programCode: '',
                programName: '',
                programSecret: '',
                redirectUri: '',
                programImage: '',
                accessToken: 604800,
                orderNum: 1,
                enableFlag: 1,
                remarks: '',
            },
            rules: {
                programCode: [{required: true, message: '', trigger: 'change'}],
                programName: [{required: true, message: '', trigger: 'change'}],
                redirectUri: [{required: true, message: '', trigger: 'change'}],
                programSecret: [{required: false, message: '', trigger: 'change'}],
                programImage: [{required: true, message: '', trigger: 'change'}],
                enableFlag: [{required: true, message: '', trigger: 'change'}],
                accessToken: [{required: false, message: '', trigger: 'change'}],
                remarks: [{required: false, message: '', trigger: 'change'}],
            }
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                if (this.id) {
                    this.getData();
                }
            }
        }
    },
    methods: {
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/systemProgram/getOneEntity/" + this.id).then(res => {
                this.form = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$axios.post("/CHILD_SYSTEM/systemProgram/" + (this.id ? "update" : "insert"), this.form).then(res => {
                        this.resetForm();
                        this.$message.success(res.message);
                    }).finally(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
        uploadImg(){
            this.suffixes = ".jpg,.png,.gif";
            this.showUpload = true;
        },
        setFileList(data) {
            this.form.programImage = data[0].filePath;
        },
    }
}
</script>

<style scoped>

</style>